{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    {if condition="$id eq 0"}
    <div class="layui-form-bar">
        <h3 class="pb-3 tb-header">新增数据</h3>
    </div>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">送印人<font>*</font>
            </td>
            <td>
                <input type="text" name="user" lay-verify="required" placeholder="请输入送印人" lay-reqText="请输入送印人" autocomplete="on" class="layui-input">
            </td>
            <td class="layui-td-gray">表类型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="kind" lay-verify="required" class="layui-input">
                        <option value=""></option>
                        {volist name="table_types" id="vo"}
                        <option {eq name="default['kind']" value="$vo.value" }selected{/eq} value="{$vo.value}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">日期<font>*</font></td>
            <td>
                <input type="text" id="date" name="date" lay-verify="required" value="{$default.date}" placeholder="请选择日期" lay-reqText="请选择日期" autocomplete="off" class="layui-input">
            </td>
        </tr>
        <tr>
            <div class="layui-btn-container">
                <span class="layui-btn layui-btn-normal layui-btn-sm add-wyc">+ 添加文印详情</span>
            </div>
        </tr>
    </table>
    <div class="layui-form-bar">
        <h3 class="pb-3 tb-header">文印详情</h3>
    </div>
    <table class="layui-table layui-table-form wyc">
        <tr>
            <td class="layui-td-gray">文印类型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="op" lay-verify="required" class="layui-input">
                        {volist name="op_types" id="vo"}
                        <option value="{$vo.value}" {eq name="$i" value="1"}selected{/eq}>{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">纸型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="paper" lay-verify="required" class="layui-input">
                        {volist name="paper_types" id="vo"}
                        <option value="{$vo.value}" {eq name="$i" value="1"}selected{/eq}>{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">单/双<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="double" lay-verify="required" class="layui-input">
                        <option value="0" selected>单</option>
                        <option value="1">双</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">数量</td>
            <td>
                <input type="number" name="amount" lay-verify="required" placeholder="请输入数量" lay-reqText="数量" autocomplete="off" class="layui-input">
            </td>
            <td class="layui-td-gray">内容<font>*</font></td>
            <td>
                <input type="text" name="content" lay-verify="required" placeholder="请输入内容" lay-reqText="请输入内容" autocomplete="on" class="layui-input">
            </td>
        </tr>
    </table>
    {else/}
    <div class="layui-form-bar">
        <h3 class="pb-3">编辑数据</h3>
    </div>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">送印人<font>*</font>
            </td>
            <td>
                <input type="text" name="user" lay-verify="required" value="{$record.user}" autocomplete="on" class="layui-input">
            </td>
            <td class="layui-td-gray">表类型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <input type="hidden" name="id" value="{$record.id}">
                    <select name="kind" lay-verify="required" class="layui-input">
                        <option value=""></option>
                        {volist name="table_types" id="vo"}
                        <option value="{$vo.value}" {eq name="$record.kind" value="$vo.value" }selected{/eq}>{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">日期<font>*</font></td>
            <td>
                <input type="text" id="date" name="date" lay-verify="required" value="{$record.date}" autocomplete="off" class="layui-input">
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">文印类型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="op" lay-verify="required" class="layui-input">
                        <option value=""></option>
                        {volist name="op_types" id="vo"}
                        <option value="{$vo.value}" {eq name="$record.op" value="$vo.value" }selected{/eq}>{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">纸型<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="paper" lay-verify="required" class="layui-input">
                        <option value=""></option>
                        {volist name="paper_types" id="vo"}
                        <option value="{$vo.value}" {eq name="$record.paper" value="$vo.value" }selected{/eq}>{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td class="layui-td-gray">单/双<font>*</font></td>
            <td>
                <div class="layui-input-block">
                    <select name="double" lay-verify="required" class="layui-input">
                        <option value=""></option>
                        <option value="0" {eq name="$record.double" value="0" }selected{/eq}>单</option>
                        <option value="1" {eq name="$record.double" value="1" }selected{/eq}>双</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">数量</td>
            <td>
                <input type="number" name="amount" lay-verify="required" value="{$record.amount}" autocomplete="off" class="layui-input">
            </td>
            <td class="layui-td-gray">内容<font>*</font></td>
            <td>
                <input type="text" name="content" lay-verify="required" value="{$record.content}" autocomplete="on" class="layui-input">
            </td>
        </tr>
    </table>
    {/if}
    <div class="py-3">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    let tableIndex = 1;

    function gouguInit() {
        let form = layui.form, tool = layui.tool;

        //监听提交
        form.on('submit(webform)', function (data) {
            let callback = function (e) {
                layer.msg(e.msg);
                if (e.code == 0) {
                    parent.layui.pageTable.reload();
                    setTimeout(function () {
                        parent.layui.tool.close();
                    }, 1000);
                }
            };
            tool.post("/admin/data/add", data.field, callback);
            return false;
        });

        layui.laydate.render({
            elem: '#date',
            type: 'date',
            format: 'yyyyMMdd'
        });

        let deleteBtn = '<div class="layui-btn-container warp-del-wyc" style="margin:5px 0 0">' +
                            '<span class="layui-btn layui-btn-danger layui-btn-sm del-wyc" style="margin-bottom: 0;">- 删除文印详情</span>' +
                        '</div>';
        let sep = '<div class="sep-wyc" style="height: 1px;margin-top: 10px;"></div>';

        $('body').on('click', '.add-wyc', function () {
            // 倒序插入
            let table = $('table').eq(1).clone(false);

            let delBtnLast = $('div.warp-del-wyc');
            if (delBtnLast.length > 0) {
                delBtnLast.after(deleteBtn).after(table).after(sep);
            } else {
                $('table:last').after(deleteBtn).after(table).after(sep);
            }

            // 没有克隆事件，需要重新渲染一下
            form.render('select');

            // 修改表单字段名称
            $('table:last select[name="op"]').attr('name', 'op-' + tableIndex);
            $('table:last select[name="paper"]').attr('name', 'paper-' + tableIndex);
            $('table:last select[name="double"]').attr('name', 'double-' + tableIndex);
            $('table:last input[name="amount"]').attr('name', 'amount-' + tableIndex);
            $('table:last input[name="content"]').attr('name', 'content-' + tableIndex);

            $('body').on('click', '.del-wyc', function () {
                let parent = $(this).parent('div');
                parent.prevUntil('.sep-wyc').remove();
                parent.prev('tbody').remove();
                parent.remove();
            });

            tableIndex++;
        });
    }
</script>
{/block}
<!-- /脚本 -->